<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>三级联动用到</title>
        <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
    </head>
    <body>
        <p id="p1">I would like to say: </p>
        <p id="p2">I would like to say: </p>
        <hr>
        <div id="div1"></div>
        <hr>
        <div id="div2"></div>
        <hr>
        <div id="div3"></div>
        
        
        请选择省: <select name="" id="province">
        </select>
        <br>
        请选择市: <select name="" id="city">
        </select>

    </body>
    <script>
        // 要插入的元素  appendTo   被插入的元素
        //把页面查询到的匹配的元素追加到另一个指定的元素元素集合中, 即把p标签添加到div元素中, p标签就没了 
        $("p[id='p1']").appendTo("div[id='div1']");
        //自定义元素追加
        $("<button>点我</button>").appendTo("div[id='div2']").addClass("test").end();
        $("<button>点我</button>").appendTo("div[id='div2']").addClass("test").end();
        
        //被插入的元素     append  要插入的元素
        $("div[id='div3']").append("<b>Hello</b>");
        $("div[id='div3']").append("<b>Hello world</b>"); 
        
        $("select[id='province']").append(  " <option name='guangxi'> 广西 </option>" );
        $("select[id='city']").append(  " <option name='nanning'> 南宁 </option>" );
        $("select[id='city']").append(  " <option name='guilin'> 桂林 </option>" );
        $("select[id='city']").append(  " <option name='guigang'> 贵港 </option>" );
        
        
 
        
        
        
        
        
    </script>
</html>
